<template>
  <div class="log-base-input-wrapper">
    <input type="text" :placeholder="placeholder" ref="input"
    :value="value"
    @change.stop="submitChange($event)"
    @input="emitChange($event)">
  </div>
</template>

<script>
  export default {
    props: ['placeholder', 'value'],
    emits: ['update:value', 'change'],
    methods: {
      focus() {
        this.$refs.input.focus();
      },
      submitChange(e) {
        this.$emit('change', e);
      },
      emitChange(e) {
        this.$emit('update:value', e.target.value);
      }
    },
  }
</script>

<style lang="less" scoped>
@w: var(--baseInputWidth);
@h: var(--baseInputHeight);
@fs: var(--baseInputFontsize);
@atom: calc(@fs / 15);

.log-base-input-wrapper {
  box-sizing: border-box;
  background-color: white;
  width: @w;
  height: @h;
  font-size: @fs;

  border-radius: calc(@fs / 5);
  border-bottom: @atom solid #ddd;
  transition: .1s;

  &:focus-within {
    box-shadow: calc(@atom * 2) calc(@atom * 2) calc(@atom * 3) #ccc;
  }

  input {
    box-sizing: border-box;
    width: @w;
    height: @h;
    padding: 0 calc(@fs / 2);
    line-height: @h;
    background-color: transparent;
    font-size: @fs;
  }
}
</style>